<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 一,vue中data为什么是一个函数?
      // 因为函数拥有独立作用域,可以防止组件中变量相互污染

      // 二,vue是如何做依赖收集的?
      // vue中的template模板无法被浏览器渲染,因为它不是正确的HTML语法,所以就需要将template转化为一个render函数这样浏览器就可以执行这一个函数并渲染出对应的html元素,这样就可以让视图跑起来了,这样一个转化的过程也叫做模板编译

      // 三,v-show和v-if的区别?
      // 两者下相同点都能控制元素的显示和隐藏
      // v-show: v-show是动态的给元素添加display:none来控制元素显示和隐藏
      // v-if: v-if是动态的创建和销毁
      // 总结:当需要频繁切换显示和隐藏的时候就使用v-show,不频繁切换的时候就使用v-if

      // 四,computed和watch的区别?
      // computed(计算属性):依赖多个数据计算出一个结果,拥有缓存性
      // watch(侦听器):用于监听一个值的变化来进行一些处理

      // 五,为什么避免v-if和v-for用在一起?
      // 因为v-for比v-if具有更高的优先级,所以不会每一次循环都遍历一下,只会判断最后一次循环的结果

      // 六,vue中的key值的作用是什么?
      // key值的作用主要就是为了更高效的更新虚拟DOM,它的原理就是vue在遍历数据的时候可以精准的判断两个节点是否为同一个,从而避免更新不同的元素

      // 七,怎么样在created里操作dom元素？
      // 可以使用nextTick在created里面操作DOM,因为nextTick函数是在DOM元素渲染后执行的,还有就是页面每次更新后也会调用nextTick函数

      // 八,computed能和data里的属性名相同吗?
      // 不能,因为不管是computed属性名还是data属性名还是props属性名最终都会被挂载到vm实例上,所以这三个不可以同名

      // 九,style加上scoped属性的原理是什么?
      // 给每个节点的class前面都添加一个data-v-'8位的哈希值'来防止类名的冲突

      // 十,怎么样理解vue中的单向数据流
      // 单向数据流就是数据从父组件传递给子组件,如果传递的是基本数据类型,子组件不能修改和赋值,如果是引用数据类型的话,子组件可以修改,但还是不能赋值

      // 十一,组件化开发的看法
      // 01.复用性高效,02.拥有独立性,03.可配置性,04.可以组合使用,05.组件代码的健壮性(容错),06.必须得有说明文档

    </script>
  </body>
</html>
